<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>查询单一用户</title>
  <style></style>
</head>
<body>
  <h1>查询单一用户(通过名字查询)</h1>
  <hr>
  <input type="text" placeholder="输入用户姓名" id="username"><br>
  <button id="btn">查询</button>
  <table border="2">
    <thead>
      <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>电话号码</th>
        <th>是否会员</th>
      </tr>
    </thead>
    <tbody id="box">
    </tbody>
  </table>
  <script>
    //获取元素
    var username = document.getElementById('username');
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    //触发事件
    btn.onclick=function(){
      //收集用户数据去空格
      var usernameval = username.value;
      ajax(usernameval);
    }
    function ajax(n){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
          if(xhr.status>=200&&xhr.status<300){
            console.log(xhr.responseText)
            var result = JSON.parse(xhr.responseText)
              alert(result.msg);
              show(result.data);
          }
        }
      }
      xhr.open('get',`/admin/find?uname=${n}`,true)
      xhr.send()
     
    }
    function show(arr){
      //套路2创建一个空字符串，用于累计标签
      var str='';
      //套路3 for循环
      for(var i=0;i<arr.length;i++){
        str+=`
        <tr>
        <td>${arr[i].u_id}</td>
        <td>${arr[i].u_names}</td>
        <td>${arr[i].u_phone}</td>
        <td>${arr[i].u_member}</td>
      </tr>`
      }
      box.innerHTML = str
    } 
  </script>
</body>
</html>